<template><van-sticky>
  <div class="headerContainer">
    <van-icon name="wap-home-o" @click="$router.push('/')" size="28px" class="home"  />
    
      <div v-if="showLogo">
      <div class="worth">值得买</div>
    </div>
   
    <div v-else  class="logo">
    </div>
    <div class="right">
      <van-icon name="search" class="search" @click="$router.push('/search')" size='28px'/>
      <van-icon name="cart-o" @click="$router.push('/shopCart')" size="28px"/>
    </div>
  </div> </van-sticky>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
  export default defineComponent({
    name:'',
  })
</script>
<script lang="ts" setup>
const props = defineProps<{
  showLogo:Boolean
}>()
</script>

<style lang="less" scoped>
  .headerContainer{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 44px;
    background-color: #eee;
    // background-color: red;
    display: flex;
    align-items: center;
    padding: 0 10px;
    // margin-bottom: 20px;
    // justify-content: space-evenly;
    .logo{
      background-image: url(@/static/images/hd-sfa8ad70b41-44d9a584e7.png);
      width: 62px;
      height: 19px;
      background-size: 1.72rem 4.2rem;
      background-position: -2px -1.28rem;
      // text-align: center;
      // margin: 0 auto;
      position: absolute;
      right: 170px;
    }
    .worth{
      width: 75px;
      height: 20px;
      font-size: 20px;
      margin: 0 auto;
      position: absolute;
      z-index: 1111;
      font-size: 18px;
      right: 150px;
      width: 62px;
      height: 19px;
      top: 10px;
      color: black;
    }
    .right{
      margin-left: 255px;
      .search{
        margin-right: 10px;
      }
    }
  }
</style>
